import { useState, useEffect } from 'react';
import TabMenu from '../components/TabMenu';
import SignOut from '../components/SignOut';
import MyBreadcrumb from '../components/MyBreadcrumb';
import { Layout } from 'antd';
import { useDispatch } from 'umi';
import storage from '../utils/storageUtils';
import styles from './index.less';
import { getMenuByUserId } from '../apis';
import '../utils/axiosUtil';

const { Header, Content } = Layout;

export default function IndexPage(props) {
  const dispatch = useDispatch();
  const [router, setRouter] = useState([]);
  const [userInfo, setUserInfo] = useState({});
  useEffect(async () => {
    const userInfo = storage.getStorage('userInfo');
    dispatch({
      type: 'user/initUser',
      payload: userInfo,
    });
    setUserInfo(userInfo);
    console.log(userInfo);
    menu(userInfo);
  }, []);
  //获取权限菜单
  const menu = async (userInfo) => {
    const result = await getMenuByUserId(userInfo.username);
    setRouter([...result[0].children]);
  };
  const signOut = () => {
    storage.removeStorage('token');
    storage.removeStorage('userInfo');
    history.push('/login');
  };
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <TabMenu router={router}></TabMenu>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }}>
          <div className={styles.user_box}>
            <img
              className={styles.user_icon}
              src={require('@/assets/images/user_icon.png')}
              alt=""
            />
            <SignOut>{userInfo.username}</SignOut>
          </div>
        </Header>
        <Content className={styles.content} style={{ margin: '16px 8px' }}>
          <MyBreadcrumb></MyBreadcrumb>
          {props.children}
        </Content>
      </Layout>
    </Layout>
  );
}
